<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>iconfont Demo</title>
  <link rel="shortcut icon" href="//img.alicdn.com/imgextra/i2/O1CN01ZyAlrn1MwaMhqz36G_!!6000000001499-73-tps-64-64.ico" type="image/x-icon"/>
  <link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01EYTRnJ297D6vehehJ_!!6000000008020-55-tps-64-64.svg"/>
  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
  <link rel="stylesheet" href="demo.css">
  <link rel="stylesheet" href="iconfont.css">
  <script src="iconfont.js"></script>
  <!-- jQuery -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
  <!-- 代码高亮 -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
  <style>
    .main .logo {
      margin-top: 0;
      height: auto;
    }

    .main .logo a {
      display: flex;
      align-items: center;
    }

    .main .logo .sub-title {
      margin-left: 0.5em;
      font-size: 22px;
      color: #fff;
      background: linear-gradient(-45deg, #3967FF, #B500FE);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  </style>
</head>
<body>
  <div class="main">
    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
      <img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
      
    </a></h1>
    <div class="nav-tabs">
      <ul id="tabs" class="dib-box">
        <li class="dib active"><span>Unicode</span></li>
        <li class="dib"><span>Font class</span></li>
        <li class="dib"><span>Symbol</span></li>
      </ul>
      
      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=3024451" target="_blank" class="nav-more">查看项目</a>
      
    </div>
    <div class="tab-container">
      <div class="content unicode" style="display: block;">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
              <span class="icon iconfont">&#xe6eb;</span>
                <div class="name">文件夹</div>
                <div class="code-name">&amp;#xe6eb;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6ec;</span>
                <div class="name">DOCX</div>
                <div class="code-name">&amp;#xe6ec;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6ed;</span>
                <div class="name">MP4</div>
                <div class="code-name">&amp;#xe6ed;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6ee;</span>
                <div class="name">JPG</div>
                <div class="code-name">&amp;#xe6ee;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6ef;</span>
                <div class="name">PPT</div>
                <div class="code-name">&amp;#xe6ef;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6f0;</span>
                <div class="name">JAVA</div>
                <div class="code-name">&amp;#xe6f0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6f1;</span>
                <div class="name">PDF</div>
                <div class="code-name">&amp;#xe6f1;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6f2;</span>
                <div class="name">MP3</div>
                <div class="code-name">&amp;#xe6f2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6f3;</span>
                <div class="name">XLS</div>
                <div class="code-name">&amp;#xe6f3;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6f4;</span>
                <div class="name">ZIP</div>
                <div class="code-name">&amp;#xe6f4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6f5;</span>
                <div class="name">div-1</div>
                <div class="code-name">&amp;#xe6f5;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6f6;</span>
                <div class="name">mp4-1</div>
                <div class="code-name">&amp;#xe6f6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6f7;</span>
                <div class="name">excel-1</div>
                <div class="code-name">&amp;#xe6f7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6f8;</span>
                <div class="name">源文件-1</div>
                <div class="code-name">&amp;#xe6f8;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6f9;</span>
                <div class="name">文件夹-1</div>
                <div class="code-name">&amp;#xe6f9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6fa;</span>
                <div class="name">zip-1</div>
                <div class="code-name">&amp;#xe6fa;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6fb;</span>
                <div class="name">pdf-1</div>
                <div class="code-name">&amp;#xe6fb;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6fc;</span>
                <div class="name">png-1</div>
                <div class="code-name">&amp;#xe6fc;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6fd;</span>
                <div class="name">上传-1</div>
                <div class="code-name">&amp;#xe6fd;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6fe;</span>
                <div class="name">jpg-1</div>
                <div class="code-name">&amp;#xe6fe;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6ff;</span>
                <div class="name">word-1</div>
                <div class="code-name">&amp;#xe6ff;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe700;</span>
                <div class="name">下载-1</div>
                <div class="code-name">&amp;#xe700;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe701;</span>
                <div class="name">ppt-1</div>
                <div class="code-name">&amp;#xe701;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe702;</span>
                <div class="name">txt-1</div>
                <div class="code-name">&amp;#xe702;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe703;</span>
                <div class="name">mp3-1</div>
                <div class="code-name">&amp;#xe703;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe704;</span>
                <div class="name">发表</div>
                <div class="code-name">&amp;#xe704;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe705;</span>
                <div class="name">发送</div>
                <div class="code-name">&amp;#xe705;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe706;</span>
                <div class="name">安全</div>
                <div class="code-name">&amp;#xe706;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe707;</span>
                <div class="name">发现</div>
                <div class="code-name">&amp;#xe707;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe708;</span>
                <div class="name">编辑</div>
                <div class="code-name">&amp;#xe708;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe709;</span>
                <div class="name">电脑</div>
                <div class="code-name">&amp;#xe709;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe70a;</span>
                <div class="name">拍照</div>
                <div class="code-name">&amp;#xe70a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe70b;</span>
                <div class="name">点赞</div>
                <div class="code-name">&amp;#xe70b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe70c;</span>
                <div class="name">更多</div>
                <div class="code-name">&amp;#xe70c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe70d;</span>
                <div class="name">垃圾</div>
                <div class="code-name">&amp;#xe70d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe70e;</span>
                <div class="name">设置</div>
                <div class="code-name">&amp;#xe70e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe70f;</span>
                <div class="name">我的</div>
                <div class="code-name">&amp;#xe70f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe710;</span>
                <div class="name">消息</div>
                <div class="code-name">&amp;#xe710;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe711;</span>
                <div class="name">收藏</div>
                <div class="code-name">&amp;#xe711;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe712;</span>
                <div class="name">直播</div>
                <div class="code-name">&amp;#xe712;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe713;</span>
                <div class="name">转发</div>
                <div class="code-name">&amp;#xe713;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6dd;</span>
                <div class="name">面性图表左右树图结构</div>
                <div class="code-name">&amp;#xe6dd;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6de;</span>
                <div class="name">面性图表逐年下降柱状图</div>
                <div class="code-name">&amp;#xe6de;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6df;</span>
                <div class="name">面性图表柱状图</div>
                <div class="code-name">&amp;#xe6df;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6e0;</span>
                <div class="name">面性图表仪表盘</div>
                <div class="code-name">&amp;#xe6e0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6e1;</span>
                <div class="name">面性图表业绩上涨柱状图</div>
                <div class="code-name">&amp;#xe6e1;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6e2;</span>
                <div class="name">面性图表旭日图</div>
                <div class="code-name">&amp;#xe6e2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6e3;</span>
                <div class="name">面性图表折线柱状图</div>
                <div class="code-name">&amp;#xe6e3;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6e4;</span>
                <div class="name">面性图表项目列表</div>
                <div class="code-name">&amp;#xe6e4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6e5;</span>
                <div class="name">面性图表象形柱图</div>
                <div class="code-name">&amp;#xe6e5;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6e6;</span>
                <div class="name">面性图表五象雷达图</div>
                <div class="code-name">&amp;#xe6e6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6e7;</span>
                <div class="name">面性图表时间轴</div>
                <div class="code-name">&amp;#xe6e7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6e8;</span>
                <div class="name">面性图表四象雷达图</div>
                <div class="code-name">&amp;#xe6e8;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6e9;</span>
                <div class="name">面性图表双柱状图</div>
                <div class="code-name">&amp;#xe6e9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6ea;</span>
                <div class="name">面性图表玫瑰图</div>
                <div class="code-name">&amp;#xe6ea;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe714;</span>
                <div class="name">面性图表双折线图</div>
                <div class="code-name">&amp;#xe714;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe715;</span>
                <div class="name">面性图表三角漏斗图</div>
                <div class="code-name">&amp;#xe715;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe716;</span>
                <div class="name">面性图表上下树图结构</div>
                <div class="code-name">&amp;#xe716;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe717;</span>
                <div class="name">面性图表面积图</div>
                <div class="code-name">&amp;#xe717;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe718;</span>
                <div class="name">面性图表面积件</div>
                <div class="code-name">&amp;#xe718;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe719;</span>
                <div class="name">面性图表六象雷达图</div>
                <div class="code-name">&amp;#xe719;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe71a;</span>
                <div class="name">面性图表漏斗图</div>
                <div class="code-name">&amp;#xe71a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe71b;</span>
                <div class="name">面性图表矩形树图</div>
                <div class="code-name">&amp;#xe71b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe71c;</span>
                <div class="name">面性图表交错正负柱状图</div>
                <div class="code-name">&amp;#xe71c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe71d;</span>
                <div class="name">面性图表环形图</div>
                <div class="code-name">&amp;#xe71d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe71e;</span>
                <div class="name">面性图表六边形环形图</div>
                <div class="code-name">&amp;#xe71e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe71f;</span>
                <div class="name">面性图表巢饼饼图</div>
                <div class="code-name">&amp;#xe71f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe720;</span>
                <div class="name">面性图表极坐标双轴柱状图</div>
                <div class="code-name">&amp;#xe720;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe721;</span>
                <div class="name">面性图表极坐标堆叠</div>
                <div class="code-name">&amp;#xe721;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe722;</span>
                <div class="name">面性图表饼图</div>
                <div class="code-name">&amp;#xe722;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe723;</span>
                <div class="name">面性图表环形饼图</div>
                <div class="code-name">&amp;#xe723;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe724;</span>
                <div class="name">面性图表定制饼图</div>
                <div class="code-name">&amp;#xe724;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe725;</span>
                <div class="name">面性图表步骤图</div>
                <div class="code-name">&amp;#xe725;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe726;</span>
                <div class="name">面性图表极坐标折线图</div>
                <div class="code-name">&amp;#xe726;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe727;</span>
                <div class="name">面性图表蝴蝶柱状图</div>
                <div class="code-name">&amp;#xe727;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe728;</span>
                <div class="name">面性图表极坐标柱状图</div>
                <div class="code-name">&amp;#xe728;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeb24;</span>
                <div class="name">web全景+3D模型</div>
                <div class="code-name">&amp;#xeb24;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7aa;</span>
                <div class="name">图片</div>
                <div class="code-name">&amp;#xe7aa;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7ab;</span>
                <div class="name">文件夹</div>
                <div class="code-name">&amp;#xe7ab;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7ac;</span>
                <div class="name">图片2</div>
                <div class="code-name">&amp;#xe7ac;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7ad;</span>
                <div class="name">未知文件</div>
                <div class="code-name">&amp;#xe7ad;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7ae;</span>
                <div class="name">音频</div>
                <div class="code-name">&amp;#xe7ae;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7af;</span>
                <div class="name">压缩</div>
                <div class="code-name">&amp;#xe7af;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7b0;</span>
                <div class="name">excel</div>
                <div class="code-name">&amp;#xe7b0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7b1;</span>
                <div class="name">视频2</div>
                <div class="code-name">&amp;#xe7b1;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7b2;</span>
                <div class="name">word</div>
                <div class="code-name">&amp;#xe7b2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7b3;</span>
                <div class="name">AI</div>
                <div class="code-name">&amp;#xe7b3;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7b4;</span>
                <div class="name">pdf</div>
                <div class="code-name">&amp;#xe7b4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7b5;</span>
                <div class="name">视频</div>
                <div class="code-name">&amp;#xe7b5;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7b6;</span>
                <div class="name">HTML</div>
                <div class="code-name">&amp;#xe7b6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7b7;</span>
                <div class="name">PSD</div>
                <div class="code-name">&amp;#xe7b7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7b8;</span>
                <div class="name">音频2</div>
                <div class="code-name">&amp;#xe7b8;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7b9;</span>
                <div class="name">GIF</div>
                <div class="code-name">&amp;#xe7b9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7ba;</span>
                <div class="name">txt</div>
                <div class="code-name">&amp;#xe7ba;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7bb;</span>
                <div class="name">pptl</div>
                <div class="code-name">&amp;#xe7bb;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7bc;</span>
                <div class="name">SVG</div>
                <div class="code-name">&amp;#xe7bc;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe601;</span>
                <div class="name">人才认定</div>
                <div class="code-name">&amp;#xe601;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe602;</span>
                <div class="name">社保查询</div>
                <div class="code-name">&amp;#xe602;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7bd;</span>
                <div class="name">链接</div>
                <div class="code-name">&amp;#xe7bd;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe604;</span>
                <div class="name">餐饮美食</div>
                <div class="code-name">&amp;#xe604;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe605;</span>
                <div class="name">人才公寓</div>
                <div class="code-name">&amp;#xe605;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe606;</span>
                <div class="name">免费公交</div>
                <div class="code-name">&amp;#xe606;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe607;</span>
                <div class="name">创业补贴</div>
                <div class="code-name">&amp;#xe607;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe608;</span>
                <div class="name">医疗服务</div>
                <div class="code-name">&amp;#xe608;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe609;</span>
                <div class="name">子女教育</div>
                <div class="code-name">&amp;#xe609;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60a;</span>
                <div class="name">职称评审</div>
                <div class="code-name">&amp;#xe60a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60b;</span>
                <div class="name">免费体检</div>
                <div class="code-name">&amp;#xe60b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60c;</span>
                <div class="name">政策查询</div>
                <div class="code-name">&amp;#xe60c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60d;</span>
                <div class="name">社保补贴</div>
                <div class="code-name">&amp;#xe60d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe729;</span>
                <div class="name">发送</div>
                <div class="code-name">&amp;#xe729;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe72a;</span>
                <div class="name">点赞</div>
                <div class="code-name">&amp;#xe72a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe72b;</span>
                <div class="name">更多</div>
                <div class="code-name">&amp;#xe72b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe72c;</span>
                <div class="name">首页</div>
                <div class="code-name">&amp;#xe72c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe72d;</span>
                <div class="name">日历</div>
                <div class="code-name">&amp;#xe72d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe72e;</span>
                <div class="name">收藏</div>
                <div class="code-name">&amp;#xe72e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe72f;</span>
                <div class="name">设置</div>
                <div class="code-name">&amp;#xe72f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe730;</span>
                <div class="name">我的</div>
                <div class="code-name">&amp;#xe730;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xfd2d;</span>
                <div class="name">酒店预订</div>
                <div class="code-name">&amp;#xfd2d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xfd2e;</span>
                <div class="name">同城外卖</div>
                <div class="code-name">&amp;#xfd2e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xfd2f;</span>
                <div class="name">百货超市</div>
                <div class="code-name">&amp;#xfd2f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xfd30;</span>
                <div class="name">休闲娱乐</div>
                <div class="code-name">&amp;#xfd30;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xfd31;</span>
                <div class="name">水果生鲜</div>
                <div class="code-name">&amp;#xfd31;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xfd32;</span>
                <div class="name">鲜花礼品</div>
                <div class="code-name">&amp;#xfd32;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xfd33;</span>
                <div class="name">家政服务</div>
                <div class="code-name">&amp;#xfd33;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xfd35;</span>
                <div class="name">丽人美容</div>
                <div class="code-name">&amp;#xfd35;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xfd36;</span>
                <div class="name">教育培训</div>
                <div class="code-name">&amp;#xfd36;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xfd37;</span>
                <div class="name">商家入驻</div>
                <div class="code-name">&amp;#xfd37;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xfd38;</span>
                <div class="name">企业招聘</div>
                <div class="code-name">&amp;#xfd38;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xfd39;</span>
                <div class="name">搬家运输</div>
                <div class="code-name">&amp;#xfd39;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xfd3a;</span>
                <div class="name">房东直租</div>
                <div class="code-name">&amp;#xfd3a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xfd3b;</span>
                <div class="name">个人售房</div>
                <div class="code-name">&amp;#xfd3b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xfd3c;</span>
                <div class="name">商务服务</div>
                <div class="code-name">&amp;#xfd3c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xfd3d;</span>
                <div class="name">私家好车</div>
                <div class="code-name">&amp;#xfd3d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xfd3e;</span>
                <div class="name">婚庆礼仪</div>
                <div class="code-name">&amp;#xfd3e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xfd3f;</span>
                <div class="name">宠物天地</div>
                <div class="code-name">&amp;#xfd3f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xfd40;</span>
                <div class="name">婚纱摄影</div>
                <div class="code-name">&amp;#xfd40;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xfd41;</span>
                <div class="name">废旧回收</div>
                <div class="code-name">&amp;#xfd41;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xfd42;</span>
                <div class="name">爆料</div>
                <div class="code-name">&amp;#xfd42;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xfd43;</span>
                <div class="name">征婚交友</div>
                <div class="code-name">&amp;#xfd43;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xfd44;</span>
                <div class="name">打听求助</div>
                <div class="code-name">&amp;#xfd44;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xfd45;</span>
                <div class="name">骑士风采</div>
                <div class="code-name">&amp;#xfd45;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xfd46;</span>
                <div class="name">垂钓</div>
                <div class="code-name">&amp;#xfd46;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xfd47;</span>
                <div class="name">汉堡披萨</div>
                <div class="code-name">&amp;#xfd47;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xfd48;</span>
                <div class="name">简餐速食</div>
                <div class="code-name">&amp;#xfd48;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xfd49;</span>
                <div class="name">家政服务</div>
                <div class="code-name">&amp;#xfd49;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xfd4a;</span>
                <div class="name">培训</div>
                <div class="code-name">&amp;#xfd4a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xfd4b;</span>
                <div class="name">礼物</div>
                <div class="code-name">&amp;#xfd4b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xfd4c;</span>
                <div class="name">啤酒饮料</div>
                <div class="code-name">&amp;#xfd4c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xfd4d;</span>
                <div class="name">奶茶小吃</div>
                <div class="code-name">&amp;#xfd4d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xfd4e;</span>
                <div class="name">面食馄饨</div>
                <div class="code-name">&amp;#xfd4e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xfd4f;</span>
                <div class="name">小站快送</div>
                <div class="code-name">&amp;#xfd4f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xfd50;</span>
                <div class="name">全部分类</div>
                <div class="code-name">&amp;#xfd50;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xfd51;</span>
                <div class="name">顺风车</div>
                <div class="code-name">&amp;#xfd51;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xfd52;</span>
                <div class="name">蔬果供求</div>
                <div class="code-name">&amp;#xfd52;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xfd53;</span>
                <div class="name">二手车</div>
                <div class="code-name">&amp;#xfd53;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xfd54;</span>
                <div class="name">二手回收</div>
                <div class="code-name">&amp;#xfd54;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xfd55;</span>
                <div class="name">装饰</div>
                <div class="code-name">&amp;#xfd55;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60e;</span>
                <div class="name">求职招才</div>
                <div class="code-name">&amp;#xe60e;</div>
              </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="unicode-">Unicode 引用</h2>
          <hr>

          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
          <ul>
            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
            <li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
          </ul>
          <blockquote>
            <p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
          </blockquote>
          <p>Unicode 使用步骤如下：</p>
          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
<pre><code class="language-css"
>@font-face {
  font-family: 'iconfont';
  src: url('iconfont.woff2?t=1639705211244') format('woff2'),
       url('iconfont.woff?t=1639705211244') format('woff'),
       url('iconfont.ttf?t=1639705211244') format('truetype');
}
</code></pre>
          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
<pre><code class="language-css"
>.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
<pre>
<code class="language-html"
>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
</code></pre>
          <blockquote>
            <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
          </blockquote>
          </div>
      </div>
      <div class="content font-class">
        <ul class="icon_lists dib-box">
          
          <li class="dib">
            <span class="icon iconfont icon-wenjianjia"></span>
            <div class="name">
              文件夹
            </div>
            <div class="code-name">.icon-wenjianjia
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-DOCX"></span>
            <div class="name">
              DOCX
            </div>
            <div class="code-name">.icon-DOCX
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-MP4"></span>
            <div class="name">
              MP4
            </div>
            <div class="code-name">.icon-MP4
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-JPG"></span>
            <div class="name">
              JPG
            </div>
            <div class="code-name">.icon-JPG
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-PPT"></span>
            <div class="name">
              PPT
            </div>
            <div class="code-name">.icon-PPT
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-JAVA"></span>
            <div class="name">
              JAVA
            </div>
            <div class="code-name">.icon-JAVA
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-PDF"></span>
            <div class="name">
              PDF
            </div>
            <div class="code-name">.icon-PDF
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-MP3"></span>
            <div class="name">
              MP3
            </div>
            <div class="code-name">.icon-MP3
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-XLS"></span>
            <div class="name">
              XLS
            </div>
            <div class="code-name">.icon-XLS
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-ZIP"></span>
            <div class="name">
              ZIP
            </div>
            <div class="code-name">.icon-ZIP
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-div-1"></span>
            <div class="name">
              div-1
            </div>
            <div class="code-name">.icon-div-1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-mp4-1"></span>
            <div class="name">
              mp4-1
            </div>
            <div class="code-name">.icon-mp4-1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-excel-1"></span>
            <div class="name">
              excel-1
            </div>
            <div class="code-name">.icon-excel-1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yuanwenjian-1"></span>
            <div class="name">
              源文件-1
            </div>
            <div class="code-name">.icon-yuanwenjian-1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-wenjianjia-1"></span>
            <div class="name">
              文件夹-1
            </div>
            <div class="code-name">.icon-wenjianjia-1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zip-1"></span>
            <div class="name">
              zip-1
            </div>
            <div class="code-name">.icon-zip-1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-pdf-1"></span>
            <div class="name">
              pdf-1
            </div>
            <div class="code-name">.icon-pdf-1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-png-1"></span>
            <div class="name">
              png-1
            </div>
            <div class="code-name">.icon-png-1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shangchuan-1"></span>
            <div class="name">
              上传-1
            </div>
            <div class="code-name">.icon-shangchuan-1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jpg-1"></span>
            <div class="name">
              jpg-1
            </div>
            <div class="code-name">.icon-jpg-1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-word-1"></span>
            <div class="name">
              word-1
            </div>
            <div class="code-name">.icon-word-1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xiazai-1"></span>
            <div class="name">
              下载-1
            </div>
            <div class="code-name">.icon-xiazai-1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-ppt-1"></span>
            <div class="name">
              ppt-1
            </div>
            <div class="code-name">.icon-ppt-1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-txt-1"></span>
            <div class="name">
              txt-1
            </div>
            <div class="code-name">.icon-txt-1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-mp3-1"></span>
            <div class="name">
              mp3-1
            </div>
            <div class="code-name">.icon-mp3-1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-fabiao"></span>
            <div class="name">
              发表
            </div>
            <div class="code-name">.icon-fabiao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-fasong"></span>
            <div class="name">
              发送
            </div>
            <div class="code-name">.icon-fasong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-anquan"></span>
            <div class="name">
              安全
            </div>
            <div class="code-name">.icon-anquan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-faxian"></span>
            <div class="name">
              发现
            </div>
            <div class="code-name">.icon-faxian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-bianji"></span>
            <div class="name">
              编辑
            </div>
            <div class="code-name">.icon-bianji
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-diannao"></span>
            <div class="name">
              电脑
            </div>
            <div class="code-name">.icon-diannao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-paizhao"></span>
            <div class="name">
              拍照
            </div>
            <div class="code-name">.icon-paizhao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-dianzan"></span>
            <div class="name">
              点赞
            </div>
            <div class="code-name">.icon-dianzan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-gengduo"></span>
            <div class="name">
              更多
            </div>
            <div class="code-name">.icon-gengduo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-laji"></span>
            <div class="name">
              垃圾
            </div>
            <div class="code-name">.icon-laji
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shezhi"></span>
            <div class="name">
              设置
            </div>
            <div class="code-name">.icon-shezhi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-wode"></span>
            <div class="name">
              我的
            </div>
            <div class="code-name">.icon-wode
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xiaoxi"></span>
            <div class="name">
              消息
            </div>
            <div class="code-name">.icon-xiaoxi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shoucang"></span>
            <div class="name">
              收藏
            </div>
            <div class="code-name">.icon-shoucang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zhibo"></span>
            <div class="name">
              直播
            </div>
            <div class="code-name">.icon-zhibo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zhuanfa"></span>
            <div class="name">
              转发
            </div>
            <div class="code-name">.icon-zhuanfa
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-mianxingzuoyoushutu"></span>
            <div class="name">
              面性图表左右树图结构
            </div>
            <div class="code-name">.icon-mianxingzuoyoushutu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-mianxingzhunianxiajiang"></span>
            <div class="name">
              面性图表逐年下降柱状图
            </div>
            <div class="code-name">.icon-mianxingzhunianxiajiang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-mianxingzhuzhuangtu"></span>
            <div class="name">
              面性图表柱状图
            </div>
            <div class="code-name">.icon-mianxingzhuzhuangtu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-mianxingyibiaopan"></span>
            <div class="name">
              面性图表仪表盘
            </div>
            <div class="code-name">.icon-mianxingyibiaopan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-mianxingyejishangzhang"></span>
            <div class="name">
              面性图表业绩上涨柱状图
            </div>
            <div class="code-name">.icon-mianxingyejishangzhang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-mianxingxuritu"></span>
            <div class="name">
              面性图表旭日图
            </div>
            <div class="code-name">.icon-mianxingxuritu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-mianxingzhexianzhuzhuangtu"></span>
            <div class="name">
              面性图表折线柱状图
            </div>
            <div class="code-name">.icon-mianxingzhexianzhuzhuangtu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-mianxingxiangmuliebiao"></span>
            <div class="name">
              面性图表项目列表
            </div>
            <div class="code-name">.icon-mianxingxiangmuliebiao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-mianxingxiangxingzhutu"></span>
            <div class="name">
              面性图表象形柱图
            </div>
            <div class="code-name">.icon-mianxingxiangxingzhutu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-mianxingwuxiangleidatu"></span>
            <div class="name">
              面性图表五象雷达图
            </div>
            <div class="code-name">.icon-mianxingwuxiangleidatu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-mianxingshijianzhou"></span>
            <div class="name">
              面性图表时间轴
            </div>
            <div class="code-name">.icon-mianxingshijianzhou
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-mianxingsixiangleidatu"></span>
            <div class="name">
              面性图表四象雷达图
            </div>
            <div class="code-name">.icon-mianxingsixiangleidatu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-mianxingshuangzhuzhuangtu"></span>
            <div class="name">
              面性图表双柱状图
            </div>
            <div class="code-name">.icon-mianxingshuangzhuzhuangtu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-mianxingmeiguitu"></span>
            <div class="name">
              面性图表玫瑰图
            </div>
            <div class="code-name">.icon-mianxingmeiguitu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-mianxingshuangzhexiantu"></span>
            <div class="name">
              面性图表双折线图
            </div>
            <div class="code-name">.icon-mianxingshuangzhexiantu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-mianxingsanjiaoloudoutu"></span>
            <div class="name">
              面性图表三角漏斗图
            </div>
            <div class="code-name">.icon-mianxingsanjiaoloudoutu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-mianxingshangxiashutu"></span>
            <div class="name">
              面性图表上下树图结构
            </div>
            <div class="code-name">.icon-mianxingshangxiashutu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-mianxingmianjitu"></span>
            <div class="name">
              面性图表面积图
            </div>
            <div class="code-name">.icon-mianxingmianjitu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-mianxingmianjijian"></span>
            <div class="name">
              面性图表面积件
            </div>
            <div class="code-name">.icon-mianxingmianjijian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-mianxingliuxiangleidatu"></span>
            <div class="name">
              面性图表六象雷达图
            </div>
            <div class="code-name">.icon-mianxingliuxiangleidatu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-mianxingloudoutu"></span>
            <div class="name">
              面性图表漏斗图
            </div>
            <div class="code-name">.icon-mianxingloudoutu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-mianxingjuxingshutu"></span>
            <div class="name">
              面性图表矩形树图
            </div>
            <div class="code-name">.icon-mianxingjuxingshutu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-mianxingjiaocuozhengfuzhuzhuangtu"></span>
            <div class="name">
              面性图表交错正负柱状图
            </div>
            <div class="code-name">.icon-mianxingjiaocuozhengfuzhuzhuangtu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-mianxinghuanxingtu"></span>
            <div class="name">
              面性图表环形图
            </div>
            <div class="code-name">.icon-mianxinghuanxingtu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-mianxingliubianxinghuanxingtu"></span>
            <div class="name">
              面性图表六边形环形图
            </div>
            <div class="code-name">.icon-mianxingliubianxinghuanxingtu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-mianxingchaobing"></span>
            <div class="name">
              面性图表巢饼饼图
            </div>
            <div class="code-name">.icon-mianxingchaobing
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-mianxingjizuobiaoshuangzhouzhuzhuangtu"></span>
            <div class="name">
              面性图表极坐标双轴柱状图
            </div>
            <div class="code-name">.icon-mianxingjizuobiaoshuangzhouzhuzhuangtu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-mianxingjizuobiaoduidie"></span>
            <div class="name">
              面性图表极坐标堆叠
            </div>
            <div class="code-name">.icon-mianxingjizuobiaoduidie
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-mianxingbingtu"></span>
            <div class="name">
              面性图表饼图
            </div>
            <div class="code-name">.icon-mianxingbingtu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-mianxinghuanxingbingtu"></span>
            <div class="name">
              面性图表环形饼图
            </div>
            <div class="code-name">.icon-mianxinghuanxingbingtu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-mianxingdingzhibingtu"></span>
            <div class="name">
              面性图表定制饼图
            </div>
            <div class="code-name">.icon-mianxingdingzhibingtu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-mianxingbuzhoutu"></span>
            <div class="name">
              面性图表步骤图
            </div>
            <div class="code-name">.icon-mianxingbuzhoutu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-mianxingjizuobiaozhexiantu"></span>
            <div class="name">
              面性图表极坐标折线图
            </div>
            <div class="code-name">.icon-mianxingjizuobiaozhexiantu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-mianxinghudiezhuzhuangtu"></span>
            <div class="name">
              面性图表蝴蝶柱状图
            </div>
            <div class="code-name">.icon-mianxinghudiezhuzhuangtu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-mianxingjizuobiaozhuzhuangtu"></span>
            <div class="name">
              面性图表极坐标柱状图
            </div>
            <div class="code-name">.icon-mianxingjizuobiaozhuzhuangtu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-ziyuan17"></span>
            <div class="name">
              web全景+3D模型
            </div>
            <div class="code-name">.icon-a-ziyuan17
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tupian"></span>
            <div class="name">
              图片
            </div>
            <div class="code-name">.icon-tupian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-wenjianjia1"></span>
            <div class="name">
              文件夹
            </div>
            <div class="code-name">.icon-wenjianjia1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tupian2"></span>
            <div class="name">
              图片2
            </div>
            <div class="code-name">.icon-tupian2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-weizhiwenjian"></span>
            <div class="name">
              未知文件
            </div>
            <div class="code-name">.icon-weizhiwenjian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yinpin"></span>
            <div class="name">
              音频
            </div>
            <div class="code-name">.icon-yinpin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yasuo"></span>
            <div class="name">
              压缩
            </div>
            <div class="code-name">.icon-yasuo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-excel"></span>
            <div class="name">
              excel
            </div>
            <div class="code-name">.icon-excel
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shipin2"></span>
            <div class="name">
              视频2
            </div>
            <div class="code-name">.icon-shipin2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-word"></span>
            <div class="name">
              word
            </div>
            <div class="code-name">.icon-word
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-AI"></span>
            <div class="name">
              AI
            </div>
            <div class="code-name">.icon-AI
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-pdf"></span>
            <div class="name">
              pdf
            </div>
            <div class="code-name">.icon-pdf
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shipin"></span>
            <div class="name">
              视频
            </div>
            <div class="code-name">.icon-shipin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-HTML"></span>
            <div class="name">
              HTML
            </div>
            <div class="code-name">.icon-HTML
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-PSD"></span>
            <div class="name">
              PSD
            </div>
            <div class="code-name">.icon-PSD
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yinpin2"></span>
            <div class="name">
              音频2
            </div>
            <div class="code-name">.icon-yinpin2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-GIF"></span>
            <div class="name">
              GIF
            </div>
            <div class="code-name">.icon-GIF
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-txt"></span>
            <div class="name">
              txt
            </div>
            <div class="code-name">.icon-txt
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-pptl"></span>
            <div class="name">
              pptl
            </div>
            <div class="code-name">.icon-pptl
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-SVG"></span>
            <div class="name">
              SVG
            </div>
            <div class="code-name">.icon-SVG
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-rencairending"></span>
            <div class="name">
              人才认定
            </div>
            <div class="code-name">.icon-rencairending
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shebaochaxun"></span>
            <div class="name">
              社保查询
            </div>
            <div class="code-name">.icon-shebaochaxun
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-lianjie"></span>
            <div class="name">
              链接
            </div>
            <div class="code-name">.icon-lianjie
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-canyinmeishi"></span>
            <div class="name">
              餐饮美食
            </div>
            <div class="code-name">.icon-canyinmeishi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-rencaigongyu"></span>
            <div class="name">
              人才公寓
            </div>
            <div class="code-name">.icon-rencaigongyu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-mianfeigongjiao"></span>
            <div class="name">
              免费公交
            </div>
            <div class="code-name">.icon-mianfeigongjiao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-chuangyebutie"></span>
            <div class="name">
              创业补贴
            </div>
            <div class="code-name">.icon-chuangyebutie
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yiliaofuwu"></span>
            <div class="name">
              医疗服务
            </div>
            <div class="code-name">.icon-yiliaofuwu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zinvjiaoyu"></span>
            <div class="name">
              子女教育
            </div>
            <div class="code-name">.icon-zinvjiaoyu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zhichengpingshen"></span>
            <div class="name">
              职称评审
            </div>
            <div class="code-name">.icon-zhichengpingshen
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-mianfeitijian"></span>
            <div class="name">
              免费体检
            </div>
            <div class="code-name">.icon-mianfeitijian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zhengcechaxun"></span>
            <div class="name">
              政策查询
            </div>
            <div class="code-name">.icon-zhengcechaxun
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shebaobutie"></span>
            <div class="name">
              社保补贴
            </div>
            <div class="code-name">.icon-shebaobutie
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-fasong1"></span>
            <div class="name">
              发送
            </div>
            <div class="code-name">.icon-fasong1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-dianzan1"></span>
            <div class="name">
              点赞
            </div>
            <div class="code-name">.icon-dianzan1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-gengduo1"></span>
            <div class="name">
              更多
            </div>
            <div class="code-name">.icon-gengduo1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shouye"></span>
            <div class="name">
              首页
            </div>
            <div class="code-name">.icon-shouye
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-rili"></span>
            <div class="name">
              日历
            </div>
            <div class="code-name">.icon-rili
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shoucang1"></span>
            <div class="name">
              收藏
            </div>
            <div class="code-name">.icon-shoucang1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shezhi1"></span>
            <div class="name">
              设置
            </div>
            <div class="code-name">.icon-shezhi1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-wode1"></span>
            <div class="name">
              我的
            </div>
            <div class="code-name">.icon-wode1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jiudianyuding"></span>
            <div class="name">
              酒店预订
            </div>
            <div class="code-name">.icon-jiudianyuding
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tongchengwaimai"></span>
            <div class="name">
              同城外卖
            </div>
            <div class="code-name">.icon-tongchengwaimai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-baihuochaoshi"></span>
            <div class="name">
              百货超市
            </div>
            <div class="code-name">.icon-baihuochaoshi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xiuxianyule"></span>
            <div class="name">
              休闲娱乐
            </div>
            <div class="code-name">.icon-xiuxianyule
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shuiguoshengxian"></span>
            <div class="name">
              水果生鲜
            </div>
            <div class="code-name">.icon-shuiguoshengxian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xianhualipin"></span>
            <div class="name">
              鲜花礼品
            </div>
            <div class="code-name">.icon-xianhualipin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jiazhengfuwu"></span>
            <div class="name">
              家政服务
            </div>
            <div class="code-name">.icon-jiazhengfuwu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-lirenmeirong"></span>
            <div class="name">
              丽人美容
            </div>
            <div class="code-name">.icon-lirenmeirong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jiaoyupeixun"></span>
            <div class="name">
              教育培训
            </div>
            <div class="code-name">.icon-jiaoyupeixun
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shangjiaruzhu"></span>
            <div class="name">
              商家入驻
            </div>
            <div class="code-name">.icon-shangjiaruzhu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-qiyezhaopin"></span>
            <div class="name">
              企业招聘
            </div>
            <div class="code-name">.icon-qiyezhaopin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-banjiayunshu"></span>
            <div class="name">
              搬家运输
            </div>
            <div class="code-name">.icon-banjiayunshu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-fangdongzhizu"></span>
            <div class="name">
              房东直租
            </div>
            <div class="code-name">.icon-fangdongzhizu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-gerenshoufang"></span>
            <div class="name">
              个人售房
            </div>
            <div class="code-name">.icon-gerenshoufang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shangwufuwu"></span>
            <div class="name">
              商务服务
            </div>
            <div class="code-name">.icon-shangwufuwu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-sijiahaoche"></span>
            <div class="name">
              私家好车
            </div>
            <div class="code-name">.icon-sijiahaoche
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-hunqingliyi"></span>
            <div class="name">
              婚庆礼仪
            </div>
            <div class="code-name">.icon-hunqingliyi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-chongwutiandi"></span>
            <div class="name">
              宠物天地
            </div>
            <div class="code-name">.icon-chongwutiandi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-hunshasheying"></span>
            <div class="name">
              婚纱摄影
            </div>
            <div class="code-name">.icon-hunshasheying
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-feijiuhuishou"></span>
            <div class="name">
              废旧回收
            </div>
            <div class="code-name">.icon-feijiuhuishou
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-baoliao"></span>
            <div class="name">
              爆料
            </div>
            <div class="code-name">.icon-baoliao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zhenghunjiaoyou"></span>
            <div class="name">
              征婚交友
            </div>
            <div class="code-name">.icon-zhenghunjiaoyou
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-datingqiuzhu"></span>
            <div class="name">
              打听求助
            </div>
            <div class="code-name">.icon-datingqiuzhu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-qishifengcai"></span>
            <div class="name">
              骑士风采
            </div>
            <div class="code-name">.icon-qishifengcai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-chuidiao"></span>
            <div class="name">
              垂钓
            </div>
            <div class="code-name">.icon-chuidiao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-hanbaopisa"></span>
            <div class="name">
              汉堡披萨
            </div>
            <div class="code-name">.icon-hanbaopisa
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jiancansushi"></span>
            <div class="name">
              简餐速食
            </div>
            <div class="code-name">.icon-jiancansushi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jiazhengfuwu1"></span>
            <div class="name">
              家政服务
            </div>
            <div class="code-name">.icon-jiazhengfuwu1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-peixun"></span>
            <div class="name">
              培训
            </div>
            <div class="code-name">.icon-peixun
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-liwu"></span>
            <div class="name">
              礼物
            </div>
            <div class="code-name">.icon-liwu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-pijiuyinliao"></span>
            <div class="name">
              啤酒饮料
            </div>
            <div class="code-name">.icon-pijiuyinliao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-naichaxiaochi"></span>
            <div class="name">
              奶茶小吃
            </div>
            <div class="code-name">.icon-naichaxiaochi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-mianshihuntun"></span>
            <div class="name">
              面食馄饨
            </div>
            <div class="code-name">.icon-mianshihuntun
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xiaozhankuaisong"></span>
            <div class="name">
              小站快送
            </div>
            <div class="code-name">.icon-xiaozhankuaisong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-quanbufenlei"></span>
            <div class="name">
              全部分类
            </div>
            <div class="code-name">.icon-quanbufenlei
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shunfengche"></span>
            <div class="name">
              顺风车
            </div>
            <div class="code-name">.icon-shunfengche
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shuguogongqiu"></span>
            <div class="name">
              蔬果供求
            </div>
            <div class="code-name">.icon-shuguogongqiu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-ershouche"></span>
            <div class="name">
              二手车
            </div>
            <div class="code-name">.icon-ershouche
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-ershouhuishou"></span>
            <div class="name">
              二手回收
            </div>
            <div class="code-name">.icon-ershouhuishou
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zhuangshi"></span>
            <div class="name">
              装饰
            </div>
            <div class="code-name">.icon-zhuangshi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-qiuzhizhaocai"></span>
            <div class="name">
              求职招才
            </div>
            <div class="code-name">.icon-qiuzhizhaocai
            </div>
          </li>
          
        </ul>
        <div class="article markdown">
        <h2 id="font-class-">font-class 引用</h2>
        <hr>

        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
        <p>与 Unicode 使用方式相比，具有如下特点：</p>
        <ul>
          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
</code></pre>
        <blockquote>
          <p>"
            iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
        </blockquote>
      </div>
      </div>
      <div class="content symbol">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-wenjianjia"></use>
                </svg>
                <div class="name">文件夹</div>
                <div class="code-name">#icon-wenjianjia</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-DOCX"></use>
                </svg>
                <div class="name">DOCX</div>
                <div class="code-name">#icon-DOCX</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-MP4"></use>
                </svg>
                <div class="name">MP4</div>
                <div class="code-name">#icon-MP4</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-JPG"></use>
                </svg>
                <div class="name">JPG</div>
                <div class="code-name">#icon-JPG</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-PPT"></use>
                </svg>
                <div class="name">PPT</div>
                <div class="code-name">#icon-PPT</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-JAVA"></use>
                </svg>
                <div class="name">JAVA</div>
                <div class="code-name">#icon-JAVA</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-PDF"></use>
                </svg>
                <div class="name">PDF</div>
                <div class="code-name">#icon-PDF</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-MP3"></use>
                </svg>
                <div class="name">MP3</div>
                <div class="code-name">#icon-MP3</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-XLS"></use>
                </svg>
                <div class="name">XLS</div>
                <div class="code-name">#icon-XLS</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-ZIP"></use>
                </svg>
                <div class="name">ZIP</div>
                <div class="code-name">#icon-ZIP</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-div-1"></use>
                </svg>
                <div class="name">div-1</div>
                <div class="code-name">#icon-div-1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-mp4-1"></use>
                </svg>
                <div class="name">mp4-1</div>
                <div class="code-name">#icon-mp4-1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-excel-1"></use>
                </svg>
                <div class="name">excel-1</div>
                <div class="code-name">#icon-excel-1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yuanwenjian-1"></use>
                </svg>
                <div class="name">源文件-1</div>
                <div class="code-name">#icon-yuanwenjian-1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-wenjianjia-1"></use>
                </svg>
                <div class="name">文件夹-1</div>
                <div class="code-name">#icon-wenjianjia-1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zip-1"></use>
                </svg>
                <div class="name">zip-1</div>
                <div class="code-name">#icon-zip-1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-pdf-1"></use>
                </svg>
                <div class="name">pdf-1</div>
                <div class="code-name">#icon-pdf-1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-png-1"></use>
                </svg>
                <div class="name">png-1</div>
                <div class="code-name">#icon-png-1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shangchuan-1"></use>
                </svg>
                <div class="name">上传-1</div>
                <div class="code-name">#icon-shangchuan-1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jpg-1"></use>
                </svg>
                <div class="name">jpg-1</div>
                <div class="code-name">#icon-jpg-1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-word-1"></use>
                </svg>
                <div class="name">word-1</div>
                <div class="code-name">#icon-word-1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiazai-1"></use>
                </svg>
                <div class="name">下载-1</div>
                <div class="code-name">#icon-xiazai-1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-ppt-1"></use>
                </svg>
                <div class="name">ppt-1</div>
                <div class="code-name">#icon-ppt-1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-txt-1"></use>
                </svg>
                <div class="name">txt-1</div>
                <div class="code-name">#icon-txt-1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-mp3-1"></use>
                </svg>
                <div class="name">mp3-1</div>
                <div class="code-name">#icon-mp3-1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fabiao"></use>
                </svg>
                <div class="name">发表</div>
                <div class="code-name">#icon-fabiao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fasong"></use>
                </svg>
                <div class="name">发送</div>
                <div class="code-name">#icon-fasong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-anquan"></use>
                </svg>
                <div class="name">安全</div>
                <div class="code-name">#icon-anquan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-faxian"></use>
                </svg>
                <div class="name">发现</div>
                <div class="code-name">#icon-faxian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-bianji"></use>
                </svg>
                <div class="name">编辑</div>
                <div class="code-name">#icon-bianji</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-diannao"></use>
                </svg>
                <div class="name">电脑</div>
                <div class="code-name">#icon-diannao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-paizhao"></use>
                </svg>
                <div class="name">拍照</div>
                <div class="code-name">#icon-paizhao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-dianzan"></use>
                </svg>
                <div class="name">点赞</div>
                <div class="code-name">#icon-dianzan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gengduo"></use>
                </svg>
                <div class="name">更多</div>
                <div class="code-name">#icon-gengduo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-laji"></use>
                </svg>
                <div class="name">垃圾</div>
                <div class="code-name">#icon-laji</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shezhi"></use>
                </svg>
                <div class="name">设置</div>
                <div class="code-name">#icon-shezhi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-wode"></use>
                </svg>
                <div class="name">我的</div>
                <div class="code-name">#icon-wode</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiaoxi"></use>
                </svg>
                <div class="name">消息</div>
                <div class="code-name">#icon-xiaoxi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shoucang"></use>
                </svg>
                <div class="name">收藏</div>
                <div class="code-name">#icon-shoucang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zhibo"></use>
                </svg>
                <div class="name">直播</div>
                <div class="code-name">#icon-zhibo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zhuanfa"></use>
                </svg>
                <div class="name">转发</div>
                <div class="code-name">#icon-zhuanfa</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-mianxingzuoyoushutu"></use>
                </svg>
                <div class="name">面性图表左右树图结构</div>
                <div class="code-name">#icon-mianxingzuoyoushutu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-mianxingzhunianxiajiang"></use>
                </svg>
                <div class="name">面性图表逐年下降柱状图</div>
                <div class="code-name">#icon-mianxingzhunianxiajiang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-mianxingzhuzhuangtu"></use>
                </svg>
                <div class="name">面性图表柱状图</div>
                <div class="code-name">#icon-mianxingzhuzhuangtu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-mianxingyibiaopan"></use>
                </svg>
                <div class="name">面性图表仪表盘</div>
                <div class="code-name">#icon-mianxingyibiaopan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-mianxingyejishangzhang"></use>
                </svg>
                <div class="name">面性图表业绩上涨柱状图</div>
                <div class="code-name">#icon-mianxingyejishangzhang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-mianxingxuritu"></use>
                </svg>
                <div class="name">面性图表旭日图</div>
                <div class="code-name">#icon-mianxingxuritu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-mianxingzhexianzhuzhuangtu"></use>
                </svg>
                <div class="name">面性图表折线柱状图</div>
                <div class="code-name">#icon-mianxingzhexianzhuzhuangtu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-mianxingxiangmuliebiao"></use>
                </svg>
                <div class="name">面性图表项目列表</div>
                <div class="code-name">#icon-mianxingxiangmuliebiao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-mianxingxiangxingzhutu"></use>
                </svg>
                <div class="name">面性图表象形柱图</div>
                <div class="code-name">#icon-mianxingxiangxingzhutu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-mianxingwuxiangleidatu"></use>
                </svg>
                <div class="name">面性图表五象雷达图</div>
                <div class="code-name">#icon-mianxingwuxiangleidatu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-mianxingshijianzhou"></use>
                </svg>
                <div class="name">面性图表时间轴</div>
                <div class="code-name">#icon-mianxingshijianzhou</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-mianxingsixiangleidatu"></use>
                </svg>
                <div class="name">面性图表四象雷达图</div>
                <div class="code-name">#icon-mianxingsixiangleidatu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-mianxingshuangzhuzhuangtu"></use>
                </svg>
                <div class="name">面性图表双柱状图</div>
                <div class="code-name">#icon-mianxingshuangzhuzhuangtu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-mianxingmeiguitu"></use>
                </svg>
                <div class="name">面性图表玫瑰图</div>
                <div class="code-name">#icon-mianxingmeiguitu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-mianxingshuangzhexiantu"></use>
                </svg>
                <div class="name">面性图表双折线图</div>
                <div class="code-name">#icon-mianxingshuangzhexiantu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-mianxingsanjiaoloudoutu"></use>
                </svg>
                <div class="name">面性图表三角漏斗图</div>
                <div class="code-name">#icon-mianxingsanjiaoloudoutu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-mianxingshangxiashutu"></use>
                </svg>
                <div class="name">面性图表上下树图结构</div>
                <div class="code-name">#icon-mianxingshangxiashutu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-mianxingmianjitu"></use>
                </svg>
                <div class="name">面性图表面积图</div>
                <div class="code-name">#icon-mianxingmianjitu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-mianxingmianjijian"></use>
                </svg>
                <div class="name">面性图表面积件</div>
                <div class="code-name">#icon-mianxingmianjijian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-mianxingliuxiangleidatu"></use>
                </svg>
                <div class="name">面性图表六象雷达图</div>
                <div class="code-name">#icon-mianxingliuxiangleidatu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-mianxingloudoutu"></use>
                </svg>
                <div class="name">面性图表漏斗图</div>
                <div class="code-name">#icon-mianxingloudoutu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-mianxingjuxingshutu"></use>
                </svg>
                <div class="name">面性图表矩形树图</div>
                <div class="code-name">#icon-mianxingjuxingshutu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-mianxingjiaocuozhengfuzhuzhuangtu"></use>
                </svg>
                <div class="name">面性图表交错正负柱状图</div>
                <div class="code-name">#icon-mianxingjiaocuozhengfuzhuzhuangtu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-mianxinghuanxingtu"></use>
                </svg>
                <div class="name">面性图表环形图</div>
                <div class="code-name">#icon-mianxinghuanxingtu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-mianxingliubianxinghuanxingtu"></use>
                </svg>
                <div class="name">面性图表六边形环形图</div>
                <div class="code-name">#icon-mianxingliubianxinghuanxingtu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-mianxingchaobing"></use>
                </svg>
                <div class="name">面性图表巢饼饼图</div>
                <div class="code-name">#icon-mianxingchaobing</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-mianxingjizuobiaoshuangzhouzhuzhuangtu"></use>
                </svg>
                <div class="name">面性图表极坐标双轴柱状图</div>
                <div class="code-name">#icon-mianxingjizuobiaoshuangzhouzhuzhuangtu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-mianxingjizuobiaoduidie"></use>
                </svg>
                <div class="name">面性图表极坐标堆叠</div>
                <div class="code-name">#icon-mianxingjizuobiaoduidie</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-mianxingbingtu"></use>
                </svg>
                <div class="name">面性图表饼图</div>
                <div class="code-name">#icon-mianxingbingtu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-mianxinghuanxingbingtu"></use>
                </svg>
                <div class="name">面性图表环形饼图</div>
                <div class="code-name">#icon-mianxinghuanxingbingtu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-mianxingdingzhibingtu"></use>
                </svg>
                <div class="name">面性图表定制饼图</div>
                <div class="code-name">#icon-mianxingdingzhibingtu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-mianxingbuzhoutu"></use>
                </svg>
                <div class="name">面性图表步骤图</div>
                <div class="code-name">#icon-mianxingbuzhoutu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-mianxingjizuobiaozhexiantu"></use>
                </svg>
                <div class="name">面性图表极坐标折线图</div>
                <div class="code-name">#icon-mianxingjizuobiaozhexiantu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-mianxinghudiezhuzhuangtu"></use>
                </svg>
                <div class="name">面性图表蝴蝶柱状图</div>
                <div class="code-name">#icon-mianxinghudiezhuzhuangtu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-mianxingjizuobiaozhuzhuangtu"></use>
                </svg>
                <div class="name">面性图表极坐标柱状图</div>
                <div class="code-name">#icon-mianxingjizuobiaozhuzhuangtu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-ziyuan17"></use>
                </svg>
                <div class="name">web全景+3D模型</div>
                <div class="code-name">#icon-a-ziyuan17</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tupian"></use>
                </svg>
                <div class="name">图片</div>
                <div class="code-name">#icon-tupian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-wenjianjia1"></use>
                </svg>
                <div class="name">文件夹</div>
                <div class="code-name">#icon-wenjianjia1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tupian2"></use>
                </svg>
                <div class="name">图片2</div>
                <div class="code-name">#icon-tupian2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-weizhiwenjian"></use>
                </svg>
                <div class="name">未知文件</div>
                <div class="code-name">#icon-weizhiwenjian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yinpin"></use>
                </svg>
                <div class="name">音频</div>
                <div class="code-name">#icon-yinpin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yasuo"></use>
                </svg>
                <div class="name">压缩</div>
                <div class="code-name">#icon-yasuo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-excel"></use>
                </svg>
                <div class="name">excel</div>
                <div class="code-name">#icon-excel</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shipin2"></use>
                </svg>
                <div class="name">视频2</div>
                <div class="code-name">#icon-shipin2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-word"></use>
                </svg>
                <div class="name">word</div>
                <div class="code-name">#icon-word</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-AI"></use>
                </svg>
                <div class="name">AI</div>
                <div class="code-name">#icon-AI</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-pdf"></use>
                </svg>
                <div class="name">pdf</div>
                <div class="code-name">#icon-pdf</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shipin"></use>
                </svg>
                <div class="name">视频</div>
                <div class="code-name">#icon-shipin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-HTML"></use>
                </svg>
                <div class="name">HTML</div>
                <div class="code-name">#icon-HTML</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-PSD"></use>
                </svg>
                <div class="name">PSD</div>
                <div class="code-name">#icon-PSD</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yinpin2"></use>
                </svg>
                <div class="name">音频2</div>
                <div class="code-name">#icon-yinpin2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-GIF"></use>
                </svg>
                <div class="name">GIF</div>
                <div class="code-name">#icon-GIF</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-txt"></use>
                </svg>
                <div class="name">txt</div>
                <div class="code-name">#icon-txt</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-pptl"></use>
                </svg>
                <div class="name">pptl</div>
                <div class="code-name">#icon-pptl</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-SVG"></use>
                </svg>
                <div class="name">SVG</div>
                <div class="code-name">#icon-SVG</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-rencairending"></use>
                </svg>
                <div class="name">人才认定</div>
                <div class="code-name">#icon-rencairending</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shebaochaxun"></use>
                </svg>
                <div class="name">社保查询</div>
                <div class="code-name">#icon-shebaochaxun</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-lianjie"></use>
                </svg>
                <div class="name">链接</div>
                <div class="code-name">#icon-lianjie</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-canyinmeishi"></use>
                </svg>
                <div class="name">餐饮美食</div>
                <div class="code-name">#icon-canyinmeishi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-rencaigongyu"></use>
                </svg>
                <div class="name">人才公寓</div>
                <div class="code-name">#icon-rencaigongyu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-mianfeigongjiao"></use>
                </svg>
                <div class="name">免费公交</div>
                <div class="code-name">#icon-mianfeigongjiao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-chuangyebutie"></use>
                </svg>
                <div class="name">创业补贴</div>
                <div class="code-name">#icon-chuangyebutie</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yiliaofuwu"></use>
                </svg>
                <div class="name">医疗服务</div>
                <div class="code-name">#icon-yiliaofuwu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zinvjiaoyu"></use>
                </svg>
                <div class="name">子女教育</div>
                <div class="code-name">#icon-zinvjiaoyu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zhichengpingshen"></use>
                </svg>
                <div class="name">职称评审</div>
                <div class="code-name">#icon-zhichengpingshen</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-mianfeitijian"></use>
                </svg>
                <div class="name">免费体检</div>
                <div class="code-name">#icon-mianfeitijian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zhengcechaxun"></use>
                </svg>
                <div class="name">政策查询</div>
                <div class="code-name">#icon-zhengcechaxun</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shebaobutie"></use>
                </svg>
                <div class="name">社保补贴</div>
                <div class="code-name">#icon-shebaobutie</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fasong1"></use>
                </svg>
                <div class="name">发送</div>
                <div class="code-name">#icon-fasong1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-dianzan1"></use>
                </svg>
                <div class="name">点赞</div>
                <div class="code-name">#icon-dianzan1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gengduo1"></use>
                </svg>
                <div class="name">更多</div>
                <div class="code-name">#icon-gengduo1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shouye"></use>
                </svg>
                <div class="name">首页</div>
                <div class="code-name">#icon-shouye</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-rili"></use>
                </svg>
                <div class="name">日历</div>
                <div class="code-name">#icon-rili</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shoucang1"></use>
                </svg>
                <div class="name">收藏</div>
                <div class="code-name">#icon-shoucang1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shezhi1"></use>
                </svg>
                <div class="name">设置</div>
                <div class="code-name">#icon-shezhi1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-wode1"></use>
                </svg>
                <div class="name">我的</div>
                <div class="code-name">#icon-wode1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jiudianyuding"></use>
                </svg>
                <div class="name">酒店预订</div>
                <div class="code-name">#icon-jiudianyuding</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tongchengwaimai"></use>
                </svg>
                <div class="name">同城外卖</div>
                <div class="code-name">#icon-tongchengwaimai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-baihuochaoshi"></use>
                </svg>
                <div class="name">百货超市</div>
                <div class="code-name">#icon-baihuochaoshi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiuxianyule"></use>
                </svg>
                <div class="name">休闲娱乐</div>
                <div class="code-name">#icon-xiuxianyule</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shuiguoshengxian"></use>
                </svg>
                <div class="name">水果生鲜</div>
                <div class="code-name">#icon-shuiguoshengxian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xianhualipin"></use>
                </svg>
                <div class="name">鲜花礼品</div>
                <div class="code-name">#icon-xianhualipin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jiazhengfuwu"></use>
                </svg>
                <div class="name">家政服务</div>
                <div class="code-name">#icon-jiazhengfuwu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-lirenmeirong"></use>
                </svg>
                <div class="name">丽人美容</div>
                <div class="code-name">#icon-lirenmeirong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jiaoyupeixun"></use>
                </svg>
                <div class="name">教育培训</div>
                <div class="code-name">#icon-jiaoyupeixun</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shangjiaruzhu"></use>
                </svg>
                <div class="name">商家入驻</div>
                <div class="code-name">#icon-shangjiaruzhu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-qiyezhaopin"></use>
                </svg>
                <div class="name">企业招聘</div>
                <div class="code-name">#icon-qiyezhaopin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-banjiayunshu"></use>
                </svg>
                <div class="name">搬家运输</div>
                <div class="code-name">#icon-banjiayunshu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fangdongzhizu"></use>
                </svg>
                <div class="name">房东直租</div>
                <div class="code-name">#icon-fangdongzhizu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gerenshoufang"></use>
                </svg>
                <div class="name">个人售房</div>
                <div class="code-name">#icon-gerenshoufang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shangwufuwu"></use>
                </svg>
                <div class="name">商务服务</div>
                <div class="code-name">#icon-shangwufuwu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-sijiahaoche"></use>
                </svg>
                <div class="name">私家好车</div>
                <div class="code-name">#icon-sijiahaoche</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-hunqingliyi"></use>
                </svg>
                <div class="name">婚庆礼仪</div>
                <div class="code-name">#icon-hunqingliyi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-chongwutiandi"></use>
                </svg>
                <div class="name">宠物天地</div>
                <div class="code-name">#icon-chongwutiandi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-hunshasheying"></use>
                </svg>
                <div class="name">婚纱摄影</div>
                <div class="code-name">#icon-hunshasheying</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-feijiuhuishou"></use>
                </svg>
                <div class="name">废旧回收</div>
                <div class="code-name">#icon-feijiuhuishou</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-baoliao"></use>
                </svg>
                <div class="name">爆料</div>
                <div class="code-name">#icon-baoliao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zhenghunjiaoyou"></use>
                </svg>
                <div class="name">征婚交友</div>
                <div class="code-name">#icon-zhenghunjiaoyou</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-datingqiuzhu"></use>
                </svg>
                <div class="name">打听求助</div>
                <div class="code-name">#icon-datingqiuzhu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-qishifengcai"></use>
                </svg>
                <div class="name">骑士风采</div>
                <div class="code-name">#icon-qishifengcai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-chuidiao"></use>
                </svg>
                <div class="name">垂钓</div>
                <div class="code-name">#icon-chuidiao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-hanbaopisa"></use>
                </svg>
                <div class="name">汉堡披萨</div>
                <div class="code-name">#icon-hanbaopisa</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jiancansushi"></use>
                </svg>
                <div class="name">简餐速食</div>
                <div class="code-name">#icon-jiancansushi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jiazhengfuwu1"></use>
                </svg>
                <div class="name">家政服务</div>
                <div class="code-name">#icon-jiazhengfuwu1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-peixun"></use>
                </svg>
                <div class="name">培训</div>
                <div class="code-name">#icon-peixun</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-liwu"></use>
                </svg>
                <div class="name">礼物</div>
                <div class="code-name">#icon-liwu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-pijiuyinliao"></use>
                </svg>
                <div class="name">啤酒饮料</div>
                <div class="code-name">#icon-pijiuyinliao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-naichaxiaochi"></use>
                </svg>
                <div class="name">奶茶小吃</div>
                <div class="code-name">#icon-naichaxiaochi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-mianshihuntun"></use>
                </svg>
                <div class="name">面食馄饨</div>
                <div class="code-name">#icon-mianshihuntun</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiaozhankuaisong"></use>
                </svg>
                <div class="name">小站快送</div>
                <div class="code-name">#icon-xiaozhankuaisong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-quanbufenlei"></use>
                </svg>
                <div class="name">全部分类</div>
                <div class="code-name">#icon-quanbufenlei</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shunfengche"></use>
                </svg>
                <div class="name">顺风车</div>
                <div class="code-name">#icon-shunfengche</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shuguogongqiu"></use>
                </svg>
                <div class="name">蔬果供求</div>
                <div class="code-name">#icon-shuguogongqiu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-ershouche"></use>
                </svg>
                <div class="name">二手车</div>
                <div class="code-name">#icon-ershouche</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-ershouhuishou"></use>
                </svg>
                <div class="name">二手回收</div>
                <div class="code-name">#icon-ershouhuishou</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zhuangshi"></use>
                </svg>
                <div class="name">装饰</div>
                <div class="code-name">#icon-zhuangshi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-qiuzhizhaocai"></use>
                </svg>
                <div class="name">求职招才</div>
                <div class="code-name">#icon-qiuzhizhaocai</div>
            </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="symbol-">Symbol 引用</h2>
          <hr>

          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
          <ul>
            <li>支持多色图标了，不再受单色限制。</li>
            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
          </ul>
          <p>使用步骤如下：</p>
          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
</code></pre>
          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
<pre><code class="language-html">&lt;style&gt;
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
&lt;/style&gt;
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
&lt;/svg&gt;
</code></pre>
          </div>
      </div>

    </div>
  </div>
  <script>
  $(document).ready(function () {
      $('.tab-container .content:first').show()

      $('#tabs li').click(function (e) {
        var tabContent = $('.tab-container .content')
        var index = $(this).index()

        if ($(this).hasClass('active')) {
          return
        } else {
          $('#tabs li').removeClass('active')
          $(this).addClass('active')

          tabContent.hide().eq(index).fadeIn()
        }
      })
    })
  </script>
</body>
</html>
